<template>
  <div class="box">
    <div class="box1">评分等级</div>
    <div class="text">还款登记</div>
    <div class="box2">
      <div class="box2_top">
        <div class="top_left">
          <span>*评分等级名称</span>
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="请输入内容"
            size="small"
          />
        </div>
        <div class="top_rigth">
          <el-row class="mb-4">
            <el-button text @click="open()">
              <el-button
                ><el-icon><Plus /></el-icon>新增分值区间</el-button
              ></el-button
            >
          </el-row>
        </div>
      </div>
    </div>
    <div class="box3">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="caGraderangeid" label="序号" width="180" />
        <el-table-column prop="caGraderangemin" label="分值区间" width="200">
        </el-table-column>
        <el-table-column prop="caGraderangemax" />
        <el-table-column prop="caGradeid" label="状态" />
        <el-table-column prop="caGraderanger" label="授信等级" />
        <el-table-column label="操作">
          <div class="list">
            <el-button type="danger" :icon="Delete" circle @click="shanchu()" />
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="back">
      <el-row class="mb-4">
        <el-button @click="back">返回</el-button>
        <el-button type="primary">提交</el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";

import service from "@/apis";
import { Delete } from "@element-plus/icons-vue";
var router = useRouter();
const tableData = ref();
var input2 = ref();

onMounted(async () => {
  var res = await service.GradeAdd.Grade_moke();
  console.log(res.data.data);
  tableData.value = res.data.data;
});

var open = async () => {
  var res = await service.GradeAdd.Grade_add();
  console.log(res.data.data);
  tableData.value = res.data.data;
  var res = await service.GradeAdd.Grade_moke();
  console.log(res.data.data);
  tableData.value = res.data.data;
};

var shanchu = async () => {
  var res = await service.GradeAdd.Grade_delete();
  console.log(res.data.data);
  tableData.value = res.data.data;
  var res = await service.GradeAdd.Grade_moke();
  console.log(res.data.data);
  tableData.value = res.data.data;
};

var back = () => {
  router.push("/home/credit/credita");
};
</script>

<style lang="scss" scoped>
.box1 {
  height: 30px;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(78, 171, 254);
  border-radius: 15px;
}
.text {
  margin: 10px;
  font-weight: 700;
}
.box2_top {
  display: flex;
  justify-content: space-between;
  .top_left {
    display: flex;
    align-items: center;
  }
  span {
    font-size: 12px;
    width: 150px;
  }
}
.back {
  position: relative;
  height: 100%;
  .mb-4 {
    position: absolute;
    right: 50px;
    bottom: -400px;
  }
}

</style>